<script setup lang="ts">
import ReCol from "@/components/ReCol";
import { ref } from "vue";
import { FormProps } from "./utils/types";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    account_id: 0,
    amount: 0,
    remark: "",
    state: 1,
    created_at: "",
    updated_at: "",
    accountList: []
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });

const formRules = {
  account_id: [
    { required: true, message: "请选择WhatsApp账号", trigger: "change" }
  ],
  amount: [
    { required: true, message: "充值金额不能为空", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value === null || value === undefined || value === '') {
          callback(new Error("充值金额不能为空"));
        } else if (isNaN(value) || Number(value) <= 0) {
          callback(new Error("充值金额必须大于0"));
        } else if (Number(value) > 99999.99) {
          callback(new Error("充值金额不能超过99999.99"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ]
};
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="130px"
  >
    <el-row :gutter="30">
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="充值账号" prop="account_id">
          <el-select
            v-model="newFormInline.account_id"
            placeholder="请选择WhatsApp账号"
            clearable
            filterable
            style="width: 100%"
          >
            <el-option
              v-for="account in newFormInline.accountList"
              :key="account.id"
              :label="account.label  + (account.remark ?  ' （' +account.remark+ '）' : '') + (account.status === 0 ? ' [已停用]' : '')"
              :value="account.id"
              :disabled="account.status === 0"
            />
          </el-select>
        </el-form-item>
      </re-col>

      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="充值金额" prop="amount">
          <el-input-number
            v-model="newFormInline.amount"
            :min="0.01"
            :step="0.01"
            :precision="2"
            placeholder="请输入充值金额"
            style="width: 100%"
          />
        </el-form-item>
      </re-col>

      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="申请备注" prop="remark">
          <el-input
            v-model="newFormInline.remark"
            :rows="3"
            type="textarea"
            placeholder="请输入申请备注信息"
            style="width: 100%"
          />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>
